<template>
<view class="container">
	<!-- Tab -->
	<view class="tab-view">
		<view class="tab-view-item"
			id="0"
			:data-current="0"
			:class="{ 'active': active == 'exam' }"
			@click="onTabClick('exam')">
			<text class="tab-view-item--text">历史真题</text>
		</view>
		<view class="tab-view-item"
			id="1"
			:data-current="1"
			:class="{ 'active': active == 'remarked' }"
			@click="onTabClick('remarked')">
			<text class="tab-view-item--text">错题本</text>
		</view>
		<view class="tab-view-item"
			id="2"
			:data-current="2"
			:class="{ 'active': active == 'collect' }"
			@click="onTabClick('collect')">
			<text class="tab-view-item--text">收藏夹</text>
		</view>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 历史真题 -->
		<swiper-item style="overflow-y: auto;"></swiper-item>
		<!-- 错题本 -->
		<swiper-item style="overflow-y: auto;"></swiper-item>
		<!-- 收藏夹 -->
		<swiper-item style="overflow-y: auto;"></swiper-item>
	</swiper>
</view>
</template>

<script>
export default {
	data() {
		return {
			active: 'exam',
			tabIndex: 0,
			tabs: ['exam', 'remarked', 'collect']
		}
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	},
	methods: {
		onTabClick(type) {
			this.active = type
			switch(type) {
				case 'remarked':
					this.tabIndex = 1;
					break;
				case 'collect':
					this.tabIndex = 2;
					break;
				default:
					this.tabIndex = 0;
					break;
			}
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			this.tabIndex = index;
			this.active = this.tabs[index];
		}
	}
}
</script>
